<template>
<el-row class="tac">
  <el-col :span="12">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">

      <el-menu-item index="1">
        <i class="iconfont icon-staff1"></i>
        <span slot="title">候选人</span>
      </el-menu-item>

      <el-menu-item index="2">
        <i class="iconfont icon-people1"></i>
        <span slot="title">职位管理</span>
      </el-menu-item>

      <el-menu-item index="3">
        <i class="iconfont icon-people3"></i>
        <span slot="title">角色管理</span>
      </el-menu-item>

      <el-submenu index="4">
            <template slot="title">
                <i class="iconfont icon-setup"></i>
                <span>设置</span>
            </template>
            <el-menu-item-group>
            <el-menu-item index="4-1">简历字段设置</el-menu-item>
            <el-menu-item index="4-2">信息设置</el-menu-item>
            </el-menu-item-group>
       </el-submenu>
    </el-menu>
  </el-col>
</el-row>
</template>

<script>
export default {
    methods: {
    handleOpen(key, keyPath) {
    console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
    console.log(key, keyPath);
    }
    
    },
    // mounted(){
    //  console.log(this.$router.path) 
    // }
}
</script>
<style lang="scss" scoped>

.el-menu ,.el-col-12{
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 60px;
}
.txet-color{
    color: #333;
}
.el-menu-item.is-active{
  color: #fff;
  background-color: #2561ef;
}
.el-menu-item{
    margin: 10px auto;
    width: 180px;
    height: 36px !important;
    line-height: 36px !important;
    border-radius: 4px;
}
.el-submenu .el-menu-item {
    min-width: 180px;
    }

i{
    margin-right: 10px;
}
// a{
//     text-decoration: none;
// }

.el-menu-item-group{
    ::v-deep .el-menu-item-group__title{
        padding: 0 !important;
    }
}
.el-submenu{
    ::v-deep .el-submenu__title{
        height: 36px;
        line-height: 36px;
        margin: 10px;
    }
}

</style>